<template>
	<view class="cu-card  no-card" >
		<my-header bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">文章详情</block>
		</my-header>

		<view class="cu-item shadow">
			<view class="title row ">{{art.title}}</view>
			<view class="wrap margin" style="margin-top:0rpx;">
				<view class="text-gray text-sm row flex justify-between margin-bottom-xs">
					发布时间：{{art.add_time}}
				</view>
				<rich-text :nodes="content"></rich-text>
				<view class="cu-bar bg-white solid-bottom " v-if="codeList[0]">
					<view class="action" style="margin-left:0rpx;">
						<text class="cuIcon-titles text-icon "></text> 点击下方按钮复制代码
					</view>
				</view>
				<view class="codeList row">
					<block v-for="(item,index) in codeList" :key="index">
						<view class="copy row" @click="copy(item.code)">
							{{item.title}}
						</view>
					</block>
				</view>
				
				<view class="text-gray  lsp row" >
					<view class="item">
						<text class="cuIcon-attentionfill margin-right-xs margin-left" ></text> {{art.view}}
					</view>
					<view class="item row" @click="zan(1)">
						<view :class="animation=='zan'?'animation-'+effect:''">
							<text class="cuIcon-appreciatefill margin-right-xs margin-left" :class="art.is_zan?'true':''"></text>
						</view>
						 {{art.zan}}
					</view>
					<view class="item row" @click="zan(2)">
						<view :class="animation=='cang'?'animation-'+effect:''">
							<text class="cuIcon-favorfill margin-right-xs margin-left" :class="art.is_cang?'true':''"></text> 
						</view>
						{{art.cang}}
					</view>
					<view class="item">
						<text class="cuIcon-messagefill margin-right-xs margin-left" :class="art.is_ping?'true':''"></text> {{art.ping.length}}
					</view>
				</view>
			</view>
			<view class="cu-bar bg-white solid-bottom  wrap" v-if="art.ping.length>0">
				<view class="action" style="margin-left:0rpx;">
					<text class="cuIcon-titles text-icon "></text> 评论区( {{art.ping.length<100 ?art.ping.length:'99+'}} )
				</view>
			</view>
			<view class="cu-card dynamic" >
			<view class="shadow">
				<view class="cu-list menu-avatar comment solids-top">
					<block v-for="(item,index) in art.ping" :key="index">
						<view class="cu-item">
							<view class="cu-avatar round" :style="'background-image:url('+item.avatar+');'"></view>
							<view class="content">
								<view class="text-grey">{{item.userName}}</view>
								<view class="text-gray text-content text-df">
									{{item.content}}
								</view>
								<view class="bg-grey padding-sm radius margin-top-xs  text-sm" v-if="item.reply">
									<view class="flex">
										<view>作者回复：</view>
										<view class="flex-sub">{{item.reply}}</view>
									</view>
								</view>
								<view class="margin-top-xs flex justify-between">
									<view class="text-gray text-df">{{item.time}}</view>
									<!-- <view>
										<text class="cuIcon-appreciatefill text-red"></text>
										<text class="cuIcon-messagefill text-gray margin-left-sm"></text>
									</view> -->
								</view>
							</view>
						</view>	
					</block>
				</view>
			</view>
		</view>
			<editor v-show="1==2" id="editor" class="ql-container" :placeholder="placeholder" @ready="onEditorReady"></editor>
    		<loading v-if="!content"></loading>
		</view>
		<view class="aa" style="height:150rpx;"></view>
            <!-- <ipx></ipx> -->
		<view class="cu-bar input padding ping" :class="is_ipX?'foot_bottom':''">
			<!-- <view class="action">
				<text class="cuIcon-sound text-grey"></text>
			</view> -->
			<input placeholder="在此处评论..." v-model="ping"   :adjust-position="true" class="solid-bottom" :focus="false" maxlength="300" cursor-spacing="10"/>
			<!-- <view class="action">
				<text class="cuIcon-emojifill text-grey"></text>
			</view> -->
			<button class="cu-btn pinglun shadow-blur" @click="pinglun()" v-if="ping.length>0">评论</button>
    		<login v-if="!login"></login>

		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				content:"",
				login:true,
				art:{
					ping:[]
				},
				editorCtx:{},
				codeList:[],
				id:1,
				is_ipX:getApp().is_ipX,
				ping:"",
				animation:"",
				// effect:"scale-up",
				effect:"scale-down",
				type:""
			}
		},
		onLoad(opt) {
			console.log(opt);
			console.log(opt.id);
			this.id=opt.id
		},
		onShareAppMessage(){},
		methods: {
			async initData(id){
				const res=await uni.$request({
					id
				},"api/art/index")
				if (res.code==200) {
					this.content=res
					this.art=res.data
					this.getPingList()
					await this.editorCtx.setContents({    
						html: this.art.content   //this.EditGoodsDetail.content为赋值内容。    
					}) 
					this.initCode()
				}else{
					let err=await	uni.$err(res.msg)
					if (err.code==200) {
						uni.reLaunch({
							 url: '/pages/home/home'
						});
					}
				}
				
			},
			async initCode(){
				let res= await this.editorCtx.getContents()
				let content=this.art.content.replace(/```code/g,"")
				content=content.replace(/\<br\>/g,"")
				this.content=content.replace(/```/g,"")
				let text=res.text
				let codeList=text.split("```code")
				let code=[]
				console.log(codeList);
				codeList.forEach((item,index)=>{
					let codeArr=item.split("```")
					console.log(codeArr);
					if (codeArr.length>1) {
						code.push({
							title:codeArr[1].match(/\((\S*)\)/)[1],
							code:codeArr[0]
						});
					}
				})
				this.codeList=code

			},
			copy(code){
				let user=getApp().user
				user.avatarUrl=""
				console.log(user);
				if (user.avatarUrl) {
					uni.$copy(code)
				} else{
					this.login=false
				}
			},
			onEditorReady() {
                // #ifdef MP-BAIDU
                this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editorId');
                // #endif
                // #ifdef APP-PLUS || H5 ||MP-WEIXIN
                uni.createSelectorQuery().select('#editor').context((res) => {
					console.log(res);
					this.editorCtx = res.context
					this.initData(this.id)
                }).exec()
				// #endif
            },
            undo() {
                this.editorCtx.undo()
			},
			async zan(type){
				// let ping=await uni.$err("评论成功，待后台审核方可显示")
				// uni.$success("点赞成功")
				const res=await uni.$request({
					id:this.id,
					type
				},"api/art/zan")
				if (res.code==200) {
					this.art[res.data.type]=res.data.num
					this.art["is_"+res.data.type]=res.data.state
					this.animation= res.data.type;
					setTimeout(()=>{
						this.animation= '';
					},1000)
				}
				
				// if (ping.code==200) {
				// 	this.art.zan+=1
				// 	this.art.is_zan=!this.art.is_zan
				// }
			},
			async cang(){
				const res=await uni.$request({
					id:this.id,
					type:2
				},"api/art/zan")
				if (res.code==200) {
					
				}
				// let ping=await uni.$err("评论成功，待后台审核方可显示")
				// if (ping.code==200) {
				// 	this.art.cang+=1
				// 	this.art.is_cang=!this.art.is_cang

				// }
			},
			async pinglun(){
				if (!getApp().user.avatarUrl) {
					console.log("请登录");
					return false;
				}

				const res=await uni.$request({
					id:this.id,
					ping:this.ping
				},"api/art/ping")
				if (res.code==200) {
					uni.$success(res.msg)
					this.getPingList()
					this.ping=""
				}else{
					uni.$err(res.msg)
				}
			},
			async getPingList(){
				const res=await uni.$request({
					id:this.id,
					ping:this.ping
				},"api/art/getpinglist")
				this.art.ping=res.data
			},
			Toggle(effect) {
				console.log(123);
				this.animation= effect;
				setTimeout(()=>{
					this.animation= '';
				}, 1000)
			},
			
		}
	}
</script>
<style >
	@import "../../colorui/animation.css";
</style>
<style lang="scss">
	// @import "./index";
	.wrap{
		margin:10rpx 25rpx;
	}
	.title{
		height: 80rpx;
		padding: 0 25rpx;
	}
	.codeList{
		flex-wrap: wrap;
		.copy{
			width: auto;
			padding: 0 40rpx;
			border-radius: 40rpx;
			height: 60rpx;
			font-size: 26rpx;
			background: $main_col;
			color: #fff;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}
	}
	.lsp{
		margin-top: 30rpx;
		justify-content: space-evenly;
		font-size: 36rpx;
		padding-bottom: 30rpx;
		.true{
			color: $main_col;
		}
	}
	.ping{
		position: fixed;
		width: 100%;
		left: 0rpx;
		bottom: 0rpx;
        box-shadow: 0rpx 0rpx 10rpx 10rpx #e1e1e1;
		box-sizing: border-box;
		.pinglun{
			background: $main_col;
			color: #fff;
		}
	}
	.text-icon{
		color:$main_col;
	}
</style>

